<?php include('includes/code/common.php'); ?>
<!doctype html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <title>Samples - Photo Album Viewer</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="robots" content="index,follow"/>
    <meta http-equiv="expires" content="0"/>
    <link rel="stylesheet" type="text/css" href="includes/css/yui_3.0.0_reset-min.css" />
    <link href="includes/css/main.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="includes/css/print.css" rel="stylesheet" type="text/css" media="print" />
    <link href="includes/css/template/sample.css" rel="stylesheet" type="text/css" media="screen" />
    <!-- PrettyPhoto -->
    <link href="includes/css/template/prettyPhoto-min.css" rel="stylesheet" type="text/css" media="screen" />
    <script type="text/javascript" src="includes/javascript/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="includes/javascript/template/jquery.prettyPhoto-min.js"></script>
    <!-- Galleria -->
    <script type="text/javascript" src="includes/javascript/template/galleria-1.2.3.js"></script>
    <!-- Load Galleria Theme -->
    <link href="includes/css/template/galleria/themes/classic/galleria.classic.css" rel="stylesheet" type="text/css" media="screen" />
    <script type="text/javascript" src="includes/css/template/galleria/themes/classic/galleria.classic.min.js"></script>
    <script type="text/javascript">
      $(function(){
        //Pretty Photo
        $("a[rel^='pics']").prettyPhoto({theme: 'dark_rounded', social_tools:false, deeplinking : false});
        //Loading Galleria
        //Galleria.loadTheme('includes/css/template/galleria/themes/classic/galleria.classic.min.js');
        $("#gallery").galleria({
          width: 600,
          height: 640,
          autoplay : 5000,
          _toggleInfo:false,
          lightbox: true,
          dataConfig: function(img) {
            return {
              //description: $(img).next('p').html()
              // description: "This is a test caption for an image",
              // title:"This is a test title --"
            }}
        });
      });
    </script>
  </head>

  <?php
  //top navigation selected
  $topNavSelected = "samples";
  ?>

  <?php
  //right navigation selected
  $rightNavSelected = "photoAlbumViewer";
  ?>

  <body>

    <!-- Container -->
    <div id="container">

      <!-- Header -->
      <div id="header" title="Treadstone Web Services">
        <?php include('includes/headerContent.php') ?>

      </div>

      <div class="clear"></div>

      <!-- Body -->
      <div id="bodyContent">

        <!-- Breadcrumbs -->
        <div id="breadcrumbs">
          <ul>
            <li class="link"><a href="index.php" title="Home">Home</a></li>
            <li class="link"><a href="samples.php" title="Samples">Samples</a></li>
            <li>Photo Album Viewer</li>
          </ul>
        </div>
        <!-- End Breadcrumbs -->

        <div id="content">

          <div class="sectionLeft">

            <h1 >PrettyPhoto - Photo Album Viewer</h1>

            <div class="photoAlbum">
              <a class="firstPic" href="images/template/photoAlbumViewer/DSCN0163.JPG" rel="pics[pp_gal]"  title="This is the caption for image 1"><img src="images/template/photoAlbumViewer/DSCN0163.JPG" alt="Album Title is displayed here"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0171.JPG" rel="pics[pp_gal]" title="This is the caption for image 2"><img src="images/template/photoAlbumViewer/thumb_DSCN0171.JPG" alt="Album Title is displayed here"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0173.JPG" rel="pics[pp_gal]" title="This is the caption for image 3"><img src="images/template/photoAlbumViewer/thumb_DSCN0173.JPG" alt="Album Title is displayed here"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0174.JPG" rel="pics[pp_gal]" title="This is the caption for image 4"><img src="images/template/photoAlbumViewer/thumb_DSCN0174.JPG" alt="Album Title is displayed here"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0175.JPG" rel="pics[pp_gal]" title="This is the caption for image 5"><img src="images/template/photoAlbumViewer/thumb_DSCN0175.JPG" alt="Album Title is displayed here"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0176.JPG" rel="pics[pp_gal]" title="This is the caption for image 6"><img src="images/template/photoAlbumViewer/thumb_DSCN0176.JPG" alt="Album Title is displayed here"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0177.JPG" rel="pics[pp_gal]" title="This is the caption for image 7"><img src="images/template/photoAlbumViewer/thumb_DSCN0177.JPG" alt="Album Title is displayed here"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0178.JPG" rel="pics[pp_gal]" title="This is the caption for image 8"><img src="images/template/photoAlbumViewer/thumb_DSCN0178.JPG" alt="Album Title is displayed here"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0179.JPG" rel="pics[pp_gal]" title="This is the caption for image 9"><img src="images/template/photoAlbumViewer/thumb_DSCN0179.JPG" alt="Album Title is displayed here"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0180.JPG" rel="pics[pp_gal]" title="This is the caption for image 10"><img src="images/template/photoAlbumViewer/thumb_DSCN0180.JPG" alt="Album Title is displayed here"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0181.JPG" rel="showPics[pp_gal]" title="This is the caption for image 11"><img src="images/template/photoAlbumViewer/thumb_DSCN0181.JPG" alt="Album Title is displayed here"/></a>
              <div class="photoAlbumTitle"><span class="albumTitleText">Album Title is displayed here</span></div>
            </div>

            <div class="photoAlbum">
              <a class="firstPic" href="images/template/photoAlbumViewer/DSCN0184.JPG" rel="pics[pp_gal2]"  title="This is the caption for image 1"><img src="images/template/photoAlbumViewer/DSCN0184.JPG" alt="Album Title is displayed here"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0185.JPG" rel="pics[pp_gal2]" title="This is the caption for image 2"><img src="images/template/photoAlbumViewer/thumb_DSCN0185.JPG" alt="Album Title is displayed here"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0186.JPG" rel="pics[pp_gal2]" title="This is the caption for image 3"><img src="images/template/photoAlbumViewer/thumb_DSCN0186.JPG" alt="Album Title is displayed here"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0188.JPG" rel="pics[pp_gal2]" title="This is the caption for image 4"><img src="images/template/photoAlbumViewer/thumb_DSCN0188.JPG" alt="Album Title is displayed here"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0189.JPG" rel="pics[pp_gal2]" title="This is the caption for image 5"><img src="images/template/photoAlbumViewer/thumb_DSCN0189.JPG" alt="Album Title is displayed here"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0191.JPG" rel="pics[pp_gal2]" title="This is the caption for image 6"><img src="images/template/photoAlbumViewer/thumb_DSCN0191.JPG" alt="Album Title is displayed here"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0193.JPG" rel="pics[pp_gal2]" title="This is the caption for image 7"><img src="images/template/photoAlbumViewer/thumb_DSCN0193.JPG" alt="Album Title is displayed here"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0195.JPG" rel="pics[pp_gal2]" title="This is the caption for image 8"><img src="images/template/photoAlbumViewer/thumb_DSCN0195.JPG" alt="Album Title is displayed here"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0196.JPG" rel="pics[pp_gal2]" title="This is the caption for image 9"><img src="images/template/photoAlbumViewer/thumb_DSCN0196.JPG" alt="Album Title is displayed here"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0197.JPG" rel="pics[pp_gal2]" title="This is the caption for image 10"><img src="images/template/photoAlbumViewer/thumb_DSCN0197.JPG" alt="Album Title is displayed here"/></a>
              <div class="photoAlbumTitle"><span class="albumTitleText">Album Title is displayed here</span></div>
            </div>

            <div class="photoAlbum">
              <a class="firstPic" href="images/template/photoAlbumViewer/DSCN0163.JPG" rel="pics[pp_gal3]"  title="This is the caption for image 1"><img src="images/template/photoAlbumViewer/DSCN0163.JPG" alt="Album Title is displayed here"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0171.JPG" rel="pics[pp_gal3]" title="This is the caption for image 2"><img src="images/template/photoAlbumViewer/thumb_DSCN0171.JPG" alt="Album Title is displayed here"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0173.JPG" rel="pics[pp_gal3]" title="This is the caption for image 3"><img src="images/template/photoAlbumViewer/thumb_DSCN0173.JPG" alt="Album Title is displayed here"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0174.JPG" rel="pics[pp_gal3]" title="This is the caption for image 4"><img src="images/template/photoAlbumViewer/thumb_DSCN0174.JPG" alt="Album Title is displayed here"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0175.JPG" rel="pics[pp_gal3]" title="This is the caption for image 5"><img src="images/template/photoAlbumViewer/thumb_DSCN0175.JPG" alt="Album Title is displayed here"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0176.JPG" rel="pics[pp_gal3]" title="This is the caption for image 6"><img src="images/template/photoAlbumViewer/thumb_DSCN0176.JPG" alt="Album Title is displayed here"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0177.JPG" rel="pics[pp_gal3]" title="This is the caption for image 7"><img src="images/template/photoAlbumViewer/thumb_DSCN0177.JPG" alt="Album Title is displayed here"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0178.JPG" rel="pics[pp_gal3]" title="This is the caption for image 8"><img src="images/template/photoAlbumViewer/thumb_DSCN0178.JPG" alt="Album Title is displayed here"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0179.JPG" rel="pics[pp_gal3]" title="This is the caption for image 9"><img src="images/template/photoAlbumViewer/thumb_DSCN0179.JPG" alt="Album Title is displayed here"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0180.JPG" rel="pics[pp_gal3]" title="This is the caption for image 10"><img src="images/template/photoAlbumViewer/thumb_DSCN0180.JPG" alt="Album Title is displayed here"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0181.JPG" rel="showPics[pp_gal3]" title="This is the caption for image 11"><img src="images/template/photoAlbumViewer/thumb_DSCN0181.JPG" alt="Album Title is displayed here"/></a>
              <div class="photoAlbumTitle"><span class="albumTitleText">Album Title is displayed here</span></div>
            </div>

            <div class="photoAlbum">
              <a class="firstPic" href="images/template/photoAlbumViewer/DSCN0184.JPG" rel="pics[pp_gal4]"  title="This is the caption for image 1"><img src="images/template/photoAlbumViewer/DSCN0184.JPG" alt="Album Title is displayed here"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0185.JPG" rel="pics[pp_gal4]" title="This is the caption for image 2"><img src="images/template/photoAlbumViewer/thumb_DSCN0185.JPG" alt="Album Title is displayed here"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0186.JPG" rel="pics[pp_gal4]" title="This is the caption for image 3"><img src="images/template/photoAlbumViewer/thumb_DSCN0186.JPG" alt="Album Title is displayed here"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0188.JPG" rel="pics[pp_gal4]" title="This is the caption for image 4"><img src="images/template/photoAlbumViewer/thumb_DSCN0188.JPG" alt="Album Title is displayed here"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0189.JPG" rel="pics[pp_gal4]" title="This is the caption for image 5"><img src="images/template/photoAlbumViewer/thumb_DSCN0189.JPG" alt="Album Title is displayed here"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0191.JPG" rel="pics[pp_gal4]" title="This is the caption for image 6"><img src="images/template/photoAlbumViewer/thumb_DSCN0191.JPG" alt="Album Title is displayed here"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0193.JPG" rel="pics[pp_gal4]" title="This is the caption for image 7"><img src="images/template/photoAlbumViewer/thumb_DSCN0193.JPG" alt="Album Title is displayed here"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0195.JPG" rel="pics[pp_gal4]" title="This is the caption for image 8"><img src="images/template/photoAlbumViewer/thumb_DSCN0195.JPG" alt="Album Title is displayed here"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0196.JPG" rel="pics[pp_gal4]" title="This is the caption for image 9"><img src="images/template/photoAlbumViewer/thumb_DSCN0196.JPG" alt="Album Title is displayed here"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0197.JPG" rel="pics[pp_gal4]" title="This is the caption for image 10"><img src="images/template/photoAlbumViewer/thumb_DSCN0197.JPG" alt="Album Title is displayed here"/></a>
              <div class="photoAlbumTitle"><span class="albumTitleText">Album Title is displayed here</span></div>
            </div>


            <h1>Galleria - Photo Album Viewer</h1>

            <div id="gallery" >

              <a class="firstPic" href="images/template/photoAlbumViewer/DSCN0184.JPG" rel="pics[pp_gal4]"  title="This is the caption for image 1"><img src="images/template/photoAlbumViewer/DSCN0184.JPG"  title="This is the Album Title. This is a test to see if it is extrememly long, how it will be displayed. It might probably get cut off the screen"  alt="This is the caption for image 1. We are going to make it an extremely long caption. It is interesting to see how it will wrap and how it will be displayed. Let us hope that it will be displayed correclty."/></a>
              <a href="images/template/photoAlbumViewer/DSCN0185.JPG" rel="pics[pp_gal4]" title="This is the caption for image 2"><img src="images/template/photoAlbumViewer/thumb_DSCN0185.JPG"   title="This is the Album Title"  alt="This is the caption for image 2"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0186.JPG" rel="pics[pp_gal4]" title="This is the caption for image 3"><img src="images/template/photoAlbumViewer/thumb_DSCN0186.JPG"   title="This is the Album Title"  alt="This is the caption for image 3"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0188.JPG" rel="pics[pp_gal4]" title="This is the caption for image 4"><img src="images/template/photoAlbumViewer/thumb_DSCN0188.JPG"   title="This is the Album Title"  alt="This is the caption for image 4"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0189.JPG" rel="pics[pp_gal4]" title="This is the caption for image 5"><img src="images/template/photoAlbumViewer/thumb_DSCN0189.JPG"   title="This is the Album Title"  alt="This is the caption for image 5"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0191.JPG" rel="pics[pp_gal4]" title="This is the caption for image 6"><img src="images/template/photoAlbumViewer/thumb_DSCN0191.JPG"   title="This is the Album Title"  alt="This is the caption for image 6"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0193.JPG" rel="pics[pp_gal4]" title="This is the caption for image 7"><img src="images/template/photoAlbumViewer/thumb_DSCN0193.JPG"   title="This is the Album Title"  alt="This is the caption for image 7"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0195.JPG" rel="pics[pp_gal4]" title="This is the caption for image 8"><img src="images/template/photoAlbumViewer/thumb_DSCN0195.JPG"   title="This is the Album Title"  alt="This is the caption for image 8"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0196.JPG" rel="pics[pp_gal4]" title="This is the caption for image 9"><img src="images/template/photoAlbumViewer/thumb_DSCN0196.JPG"   title="This is the Album Title"  alt="This is the caption for image 9"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0197.JPG" rel="pics[pp_gal4]" title="This is the caption for image 10"><img src="images/template/photoAlbumViewer/thumb_DSCN0197.JPG"   title="This is the Album Title" alt="This is the caption for image 10"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0185.JPG" rel="pics[pp_gal4]" title="This is the caption for image 2"><img src="images/template/photoAlbumViewer/thumb_DSCN0185.JPG"   title="This is the Album Title"  alt="This is the caption for image 2"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0186.JPG" rel="pics[pp_gal4]" title="This is the caption for image 3"><img src="images/template/photoAlbumViewer/thumb_DSCN0186.JPG"   title="This is the Album Title"  alt="This is the caption for image 3"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0188.JPG" rel="pics[pp_gal4]" title="This is the caption for image 4"><img src="images/template/photoAlbumViewer/thumb_DSCN0188.JPG"   title="This is the Album Title"  alt="This is the caption for image 4"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0189.JPG" rel="pics[pp_gal4]" title="This is the caption for image 5"><img src="images/template/photoAlbumViewer/thumb_DSCN0189.JPG"   title="This is the Album Title"  alt="This is the caption for image 5"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0191.JPG" rel="pics[pp_gal4]" title="This is the caption for image 6"><img src="images/template/photoAlbumViewer/thumb_DSCN0191.JPG"   title="This is the Album Title"  alt="This is the caption for image 6"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0193.JPG" rel="pics[pp_gal4]" title="This is the caption for image 7"><img src="images/template/photoAlbumViewer/thumb_DSCN0193.JPG"   title="This is the Album Title"  alt="This is the caption for image 7"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0195.JPG" rel="pics[pp_gal4]" title="This is the caption for image 8"><img src="images/template/photoAlbumViewer/thumb_DSCN0195.JPG"   title="This is the Album Title"  alt="This is the caption for image 8"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0196.JPG" rel="pics[pp_gal4]" title="This is the caption for image 9"><img src="images/template/photoAlbumViewer/thumb_DSCN0196.JPG"   title="This is the Album Title"  alt="This is the caption for image 9"/></a>
              <a href="images/template/photoAlbumViewer/DSCN0197.JPG" rel="pics[pp_gal4]" title="This is the caption for image 10"><img src="images/template/photoAlbumViewer/thumb_DSCN0197.JPG"   title="This is the Album Title" alt="This is the caption for image 10"/></a>
              <div class="photoAlbumTitle"><span class="albumTitleText">Album Title is displayed here</span></div>
            </div>


            <h1>Stand-Alone Picture Viewer</h1>

            <div class="photoViewer">
              <div class="photo">
                <div class="nav">
                  <a href="#left"><img src="images/template/photoAlbumViewer/leftArrow.png" alt="Previous" title="Previous" class="leftNav" /></a>
                  <a href="#right"><img src="images/template/photoAlbumViewer/rightArrow.png" alt="Next" title="Next" class="rightNav" /></a>
                </div>
                <a href="#newpic" title="This is the caption for image 2"><img src="images/template/photoAlbumViewer/DSCN0185.JPG"   title="This is the Album Title"  alt="This is the caption for image 2" class="currentPhoto"/></a>
              </div>
              <div class="photoViewerMenu">
                <div class="count">1/12</div>
                <div class="baseNav">
                  <a href="#left"><img src="images/template/photoAlbumViewer/leftArrowSmall.png" alt="Previous" title="Previous" /></a>
                  <a href="#right"><img src="images/template/photoAlbumViewer/rightArrowSmall.png" alt="Next" title="Next" /></a>
                </div>
                <div class="details">
                  <span class="albumTitle">This is the title for the Album</span>
                  <span class="photoCaption">This is the caption for the image. It can be a short caption or a very descriptive caption that is placed here.</span>
                </div>
                <div class="baseNext"><a href="#right"><img src="images/template/photoAlbumViewer/rightArrow.png" alt="Next" title="Next" /></a></div>
              </div>
            </div>


          </div>
          <!--   end #sectionLeft-->

        <!-- Right Navigation -->
        <div id="sidebar">
          <?php include('includes/rightNavSamples.php') ?>
        </div>
        <!-- end Right Navigation -->

        </div>
        <!-- end #content -->




      </div>
      <!-- end #bodyContent -->
      <!-- End Body -->

      <!-- Footer -->
      <div id="footer">
        <?php include('includes/footer.php') ?>
      </div>
      <!-- End Footer -->
    </div>
    <!-- End Container -->
  </body>
</html>
